<template>
    <div class="components_edit_modal">
        <el-dialog :title="title" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form   ref="queryFormData">
                <el-button style="margin:10px" size="mini" type="primary" icon="el-icon-plus" @click="addStudentStatus">添加</el-button>

                <div class="scrollBarX">
                    <el-table :data="studentStatusList"  border stripe style="width: 100%" class="components_edit_tables">
                        <el-table-column label="序号" align="center" width="50">
                        <template slot-scope="scope">
                            <span>{{scope.$index+1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="secondSchoolName"  label="异动状态"  align="center">
                            <template slot-scope="scope">
                                        <el-select v-model="studentStatusList[scope.$index].studentStatus" :disabled="studentStatusList[scope.$index].edited" clearable placeholder="请选择状态">
                                            <el-option v-for="school in stateList" :key="school.value" :label="school.name" :value="school.value"></el-option>
                                        </el-select>
                                    </template>
                        </el-table-column>
                        <el-table-column  prop="gradeName"  label="异动日期" align="center">
                            <template slot-scope="scope">
                                        <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="studentStatusList[scope.$index].changeTime" style="width: 100%;"></el-date-picker>
                                    </template>
                        </el-table-column>
                        <el-table-column  prop="professionName"  label="备注" align="center">
                            <template slot-scope="scope">
                                        <el-input v-model="studentStatusList[scope.$index].reason" clearable>
                                        </el-input>
                                    </template>
                        </el-table-column>
                    <!--    <el-table-column  prop="" label="操作" align="center" width="100">
                            <template slot-scope="scope">
                                <a size="mini" @click="deleteStudentStatus(scope.$index)">删除</a>
                            </template>
                        </el-table-column>-->
                    </el-table>
                </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="addAllStudent">确 定</el-button>
                <el-button @click="state = false"  size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
                title:null,
                state:false,
                studentId:null,
                studentStatusList:[],
                stateList:[]
            }
        },
        created() {

        },
        mounted() {},
        methods: {
            showDialog(row){
                let self = this;
                self.studentId = row.id;
                this.state = true;
                this.title=row.name+"(学号："+row.studentNumber+")学籍异动管理"
                this.getDictsQueryByType("student_school_census_status",
                    (result)=>{
                        self.stateList = result;
                    }
                );
                this.getStudentStatus(row.id);
            },
            getStudentStatus(id){
                let self = this;
                self.axios.get(api.student.studentStatusList+"?studentId="+id).then((response) => {
                    if (response.data.success) {
                        let data = response.data.data;
                        let studentStatusList = [];
                        for(let i=0;i<data.length;i++){
                            let item = {
                                id:data[i].id,
                                studentStatus:data[i].studentStatus,
                                // changeTime:data[i].changeTime,
                                changeTime:moment(data[i].changeTime).format('YYYY-MM-DD'),
                                edited:true,
                                reason:data[i].reason,
                            }
                            studentStatusList.push(item);
                        }
                        self.studentStatusList = studentStatusList;
                    } else {
                        self.$message.error(response.data.msg);
                    }
                })
            },
            addStudentStatus(){
                let self =  this;
                self.studentStatusList.push({
                    studentStatus:null,
                    changeTime:new Date(),
                    edited:false,
                    reason:null
                });
            },
            deleteStudentStatus(index){
                let studentStatusListCurrent = [];
                let studentStatusList = this.studentStatusList;
                for(let i=0;i<studentStatusList.length;i++){
                    if(i != index){
                        studentStatusListCurrent.push(studentStatusList[i]);
                    }
                }
                this.studentStatusList = studentStatusListCurrent;
            },
            //添加作业
            addAllStudent(){
                let self = this;
                let studentStatusList = self.studentStatusList;
                for(let i=0;i<studentStatusList.length;i++){
                        delete studentStatusList[i].edited;
                }

                //判断不能存在相同日期
              let hash = {};
              for(let i in studentStatusList) {
                let date = studentStatusList[i].changeTime;
                if(hash[date]){
                  self.$message.error("不应存在相同的异动日期");
                  return;
                }else{
                  hash[date] = true;
                }
              }
              self.axios.post(api.student.saveAll+"?studentId="+self.studentId,studentStatusList
                    ).then((response) => {
                        if (response.data.success) {
                            self.$message({
                                type: 'success',
                                message: response.data.msg,
                            });
                            self.$parent.$refs.studentSupportTable.$emit('vuetable:refresh');
                            self.state = false;
                        } else {
                            self.$message.error(response.data.msg);
                        }
                });
            },
            //查字典
            getDictsQueryByType(type,success){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl,{
                    params: {
                        type: type
                    }
                }).then((response) => {
                    if (response.data.success) {
                        success(response.data.data);
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                });
            },
        },
    };
</script>
<style scoped>
.components_edit_modal .el-form-item__label{
    width: 90px;
}
.selectContainer{
    background-color: #fff;
    margin-left: 25px;
    width:210px;
    height:181px;
    border: 1px solid #00BBBD;
}
.selectContainer .item{
    width:30px;
    height:30px;
    text-align: center;
}
.opration_button{
    margin:10px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100%;
}
.components_edit_modal .el-textarea .el-form-item__error{
    margin-top: 0px;
}
</style>
